<!--
 * @Date: 2021-01-24 18:02:13
 * @LastEditors: zhiqinfff
 * @LastEditTime: 2021-03-29 11:55:16
 * @FilePath: /vue-wechat_auth/src/views/order/add.vue
-->
<template>
  <div class="create">
    <div class="fixed-header">
      <van-steps :active="active">
        <van-step>售后登记</van-step>
        <van-step>寄出机器</van-step>
        <van-step>申请完成</van-step>
      </van-steps>
    </div>
    <div style="height: 1.6rem"></div>
    <template v-if="active == 0">
      <van-form @submit="onSubmit">
        <van-field
          v-model="form.customerName"
          name="姓名"
          label="姓名"
          placeholder="怎么称呼您"
          :rules="[{required: true, message: '请填写称呼'}]"
        />
        <van-field
          v-model="form.phone"
          type="number"
          name="手机号"
          label="手机号"
          placeholder="请输入您的联系方式"
          :rules="[{required: true, trigger: 'onBlur', pattern: phoneRegExp, message: '请填写正确的手机号'}]"
        />
        <van-field
          readonly
          clickable
          name="picker"
          :value="form.addr | addressJoin"
          label="所在地区"
          placeholder="点击选择城市"
          @click="showPicker = true"
        />

        <van-field
          v-model="form.addr.address"
          type="textarea"
          name="详细地址"
          label="详细地址"
          placeholder="请输入您的详细地址，方便机器寄回"
          maxlength="50"
          show-word-limit
          :rules="[{required: true, pattern: /^.{6,50}$/, message: '请填写详细地址，最少6个字'}]"
        />
        <van-field v-model="form.goumaiqudao" name="购买方式" label="购买方式" placeholder="您在哪里购买的产品？" />
        <van-field v-model="form.orderNum" name="订单号" label="订单号" placeholder="您购买的订单号" />
        <van-field v-model="form.orderTime" name="购买时间" label="购买时间" placeholder="您购买的时间" />

        <van-field name="uploader" label="购买型号">
          <template #input>
            <van-uploader v-model="form.xinghao" :max-count="3" :after-read="afterRead" />
          </template>
        </van-field>
        <van-field name="uploader" label="机器流水号">
          <template #input>
            <van-uploader v-model="form.snNum" :max-count="3" :after-read="afterRead" />
          </template>
        </van-field>
        <van-cell title="" title-style="width: 6.2em;flex:0 1 auto;">
          <template>
            <van-uploader :max-count="1" v-model="form.snNumPic" multiple />
          </template>
        </van-cell>

        <van-field
          v-model="form.wenti"
          type="textarea"
          name="问题描述"
          label="问题描述"
          placeholder="请描述您遇到的问题"
          :rules="[{required: true, message: '请描述您遇到的问题'}]"
        />

        <div style="margin: 16px">
          <van-button round block type="info" native-type="submit">生成订单</van-button>
        </div>
      </van-form>
    </template>
    <template v-if="active == 1">
      <van-form ref="checkform" @submit="onJCSubmit">
        <van-field
          v-model="form2.kdname"
          name="快递公司"
          label="快递公司"
          placeholder="您使用哪家快递公司寄出的故障机器"
          right-icon="photo-o"
          @click-right-icon="uploadImg('kdname', 'form2')"
          :rules="[{required: true, message: '请填写快递公司名称'}]"
        />
        <van-field
          v-model="form2.kdorder"
          name="快递单号"
          label="快递单号"
          placeholder="请输入您寄出快递的单号"
          right-icon="photo-o"
          @click-right-icon="uploadImg('kdorder', 'form2')"
          :rules="[{required: true, message: '请填写快递单号'}]"
        />
        <van-field v-model="form2.name" disabled name="收件人" label="收件人" />
        <van-field v-model="form2.phone" disabled name="收件电话" label="收件电话" />
        <van-field v-model="form2.address" disabled type="textarea" name="邮寄地址" label="邮寄地址" />

      </van-form>
      <div style="margin: 16px">

        <van-row>
          <van-col span="8">
            <van-button :data-clipboard-text="form2.name + '  ' + form2.phone + '  ' + form2.address" class="copy-code-button" round block plain type="primary" data-clipboard-action="copy" @click="copy" style="margin-bottom: 20px">复制信息</van-button>
          </van-col>
          <van-col span="2"></van-col>
          <van-col span="14">
            <van-button round block type="info" @click="step2Submit" native-type="submit">提交</van-button>
          </van-col>
        </van-row>
      </div>
    </template>
    <template v-if="active == 2">
      <div class="success">
        <van-icon name="checked" size="60" color="#07c160" />
        <span style="margin-top: 20px; font-size: 30px; line-height: 50px">申请成功</span>
        <p class="desc">
          尊敬的客户，您好！我们在收到产品24小时内对产品进行全面检测，48小时内完成售后并寄回产品（特殊情况会有延迟），请您耐心等待
        </p>
      </div>
    </template>
    <van-popup v-model="showPicker" position="bottom">
      <van-picker show-toolbar :columns="columns" @confirm="onConfirm" @cancel="showPicker = false" />
    </van-popup>
  </div>
</template>

<script>
import Clipboard from 'clipboard'
import {Picker, Uploader, Step, Steps, Col, Row} from 'vant'
// import {getConfigAddress} from '@/api/api'
import City from '@/utils/city'

import wxconfig from '@/plugins/wxconfig'
export default {
  data() {
    return {
      active: 0,
      form: {
        phone: '',
        customerName: '',
        addr: {
        // address: {
          province: '',
          city: '',
          area: '',
          address: ''
        },
        goumaiqudao: '', // 购买渠道
        orderNum: '', // 购买订单号
        orderTime: '', //购买时间
        xinghao: [], // 型号
        xinghaoPic: '',
        // shuliang: '',
        snNum: [],
        snNumPic: '',
        wenti: '',   // 故障描述


        // time: '',
        // pin: '', // 流水号
        // remarks: '',
        // weixiuAddr: '', //维修地址
      },
      form2: {
        kdorder: '',
        kdname: '',
        name: '暂无',
        phone: '暂无',
        address: '暂无'
      },
      phoneRegExp: /^1[3456789]\d{9}$/,
      columns: City,
      showPicker: false
      // fileList: []
    }
  },
  components: {
    vanPicker: Picker,
    vanUploader: Uploader,
    vanStep: Step,
    vanSteps: Steps,
    vanCol: Col,
    vanRow: Row
  },
  computed: {},
  filters: {
    addressJoin(address) {
      return address.province + address.city + address.area
    },
    formatArray(value) {
      return [value]
    }
  },
  mounted() {
    // wxconfig()
    this.getAddress()
  },

  methods: {
    getAddress() {
      // getConfigAddress().then(res => {
      //   conosle.log(res)
      // })
    },
    afterRead() {

    },
    step2Submit(e) {
      this.$refs.checkform.submit()
    },
    copy(e) {
      let clipboard = new Clipboard('.copy-code-button')
      clipboard.on('success', e => {
        this.$notify({type: 'success', message: '复制成功'})
        // 释放内存
        clipboard.destroy()
      })
      clipboard.on('error', e => {
        // 不支持复制
        this.$notify({type: 'warning', message: '您的浏览器不支持复制'})
        // 释放内存
        clipboard.destroy()
      })
    },
    onConfirm(value) {
      console.log(value)
      // this.value = value;
      let [province, city, area] = value
      let address = {
        province,
        city,
        area
      }
      this.form.address = address
      this.showPicker = false
    },
    onSubmit(e) {},
    onJCSubmit(e) {},
    uploadImg(e) {
      console.log(e)
      // this.$wx.chooseImage({
      //   count: 1, // 默认9
      //   sizeType: ['original', 'compressed'], // 可以指定是原图还是压缩图，默认二者都有
      //   sourceType: ['album', 'camera'], // 可以指定来源是相册还是相机，默认二者都有
      //   success: function (res) {
      //     var localIds = res.localIds; // 返回选定照片的本地ID列表，localId可以作为img标签的src属性显示图片
      //     this.$wx.uploadImage({
      //       localId: localIds, // 需要上传的图片的本地ID，由chooseImage接口获得
      //       isShowProgressTips: 1, // 默认为1，显示进度提示
      //       success: function (res) {
      //         var serverId = res.serverId; // 返回图片的服务器端ID
      //       }
      //     });
      //   }
      // });


      
    }
  }
}
</script>
<style lang="scss" scoped>
.fixed-header {
  position: fixed;
  z-index: 80;
  box-sizing: border-box;
  height: 1.6rem;
  width: 100%;
  padding: 0 15px;
  left: 0;
  right: 0;
  margin: 0 auto;
  border-bottom: 1px solid #f0f0f0;
  background: #fff;
}
.success {
  min-height: 60vh;
  display: flex;
  align-items: center;
  justify-items: center;
  flex-direction: column;
  padding-top: 120px;
  box-sizing: border-box;
  .desc {
    max-width: 75vw;
    margin: 0 auto;
    line-height: 1.5em;
    text-indent: 2em;
    margin-top: 20px;
    text-align: center;
    font-size: 16px;
    text-align: justify;
  }
}
</style>
<style lang="scss">
.create {
  .van-field--disabled .van-field__label {
    color: #646566;
  }
  .van-field__control:disabled {
    color: #323233 !important;
    -webkit-text-fill-color: #323233 !important;
  }
  .van-field__left-icon .van-icon,
  .van-field__right-icon .van-icon {
    font-size: 20px;
  }
}
</style>